import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Tabs } from 'antd';
import _ from 'lodash';

import { PageLoading, TRDefault } from '@/components/index.js';
import { useTRState } from '#/utils/trHooks.jsx';

import MarketSupplyData from './MarketSupplyData';
import MarketClearing from './MarketClearing';
import SectionImportantPassages from './SectionImportantPassages';
import BlockingSpreadCorrelation from './BlockingSpreadCorrelation';
import NodePriceComparison from './NodePriceComparison';
import { queryMarketList } from './services.js';
import { getTreeByCodes } from '@/utils';
import { HttpCode } from '#/utils/contacts';
// import './index.less';

const { TabPane } = Tabs;

const OperatingDataDisclosure = ({ menuCode = '', buttonPermissions = [] }) => {
  const [state, setState] = useTRState({
    error: '',
    loading: true,
    power: [], // 数据权限
    menuPower: [], //tab菜单权限
  });

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    setState({ loading: true });
    let error = '';
    let power = [];
    const res = await queryMarketList(menuCode);
    if (res.statusCode === HttpCode.SUCCESS) {
      power = getTreeByCodes(['market', 'group', 'station'], res.json).treeOptions;
      tabPowerControl(power);
    } else {
      error = res?.message;
    }
    setState({
      error,
      power,
      loading: false,
    });
  };

  const tabPowerControl = (power) => {
    if (!power.length) return;
    let tabCode = [
      'MarketSupplyData',
      'BlockingSpreadCorrelation',
      'ShiChangChuQingGaiKuang',
      'NodePriceComparison',
      'SectionImportantPassages',
    ];
    if (power.length === 1 && power[0]?.value === 'PXBNX') {
      tabCode = ['MarketSupplyData', 'ShiChangChuQingGaiKuang', 'NodePriceComparison'];
    }
    const codeList = _.intersection(
      buttonPermissions.map((x) => x.menuCode),
      tabCode,
    );
    setState({
      menuPower: [
        <TabPane tab="市场供需数据" key="MarketSupplyData">
          <MarketSupplyData power={power} buttonPermissions={buttonPermissions} />
        </TabPane>,
        <TabPane tab="通道阻塞监测" key="BlockingSpreadCorrelation">
          <SectionImportantPassages power={power} buttonPermissions={buttonPermissions} />
        </TabPane>,
        <TabPane tab="节点价格对比" key="NodePriceComparison">
          <NodePriceComparison power={power} buttonPermissions={buttonPermissions} />
        </TabPane>,
        <TabPane tab="阻塞-价差相关性" key="SectionImportantPassages">
          <BlockingSpreadCorrelation power={power} buttonPermissions={buttonPermissions} />
        </TabPane>,
        <TabPane tab="市场出清概况" key="ShiChangChuQingGaiKuang">
          <MarketClearing power={power} buttonPermissions={buttonPermissions} />
        </TabPane>,
      ].filter((t) => codeList.includes(t.key)),
    });
  };

  if (state.loading) return <PageLoading />;
  if (state.error) return <TRDefault type="error" message={state.error} />;
  if (!state.power.length || !state.menuPower.length) return <TRDefault type="lock" />;
  return (
    <div className={'operating-data-disclosure tabPage'}>
      <Tabs defaultActiveKey={'MarketSupplyData'}>{state.menuPower}</Tabs>
    </div>
  );
};

export default connect(({ global }) => ({
  menuCode: global?.configure?.menuCode,
  buttonPermissions: global?.configure?.buttonPermissions,
}))(OperatingDataDisclosure);
